<template>
	<div class="map" style="background:#0F1C3C;height: 100vh;display: flex;align-items: center;">
		<div id="myChartChina" :style="{ width: '80%', height: '80%' }"></div>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	import chinaJson from "echarts/map/json/china.json";
	import dayjs from "dayjs";
	export default {
		name: "Echarts",

		async mounted() {
			this.init()
			 setInterval(()=>{
			    this.init()
			 },1000*60*5)  
		},

		methods: {
			async init() {
				let data = await this.getData();
				this.drawLine(data);
			},
			async getData() {
				return await this.$http.post("/index.php/index/Goods/kjstatus")
			},
			getArea: function(str) {
				let area = {}
				let index11 = 0
				let index1 = str.indexOf("省")
				if (index1 == -1) {
					index11 = str.indexOf("自治区")
					if (index11 != -1) {
						area.Province = str.substring(0, index11 + 3)
					} else {
						area.Province = str.substring(0, 0)
					}
				} else {
					area.Province = str.substring(0, index1 + 1)
				}

				let index2 = str.indexOf("市")
				if (index11 == -1) {
					area.City = str.substring(index11 + 1, index2 + 1)
				} else {
					if (index11 == 0) {
						area.City = str.substring(index1 + 1, index2 + 1)
					} else {
						area.City = str.substring(index11 + 3, index2 + 1)
					}
				}

				let index3 = str.lastIndexOf("区")
				if (index3 == -1) {
					index3 = str.indexOf("县")
					area.Country = str.substring(index2 + 1, index3 + 1)
				} else {
					area.Country = str.substring(index2 + 1, index3 + 1)
				}
				return area;
			},
			drawLine(datas) {
				var myChartContainer = document.getElementById("myChartChina"); //绑定div容器

				var resizeMyChartContainer = function() {
					myChartContainer.style.width = 100 + "%";

					myChartContainer.style.height = window.innerHeight * 0.7 + "px";
				};

				resizeMyChartContainer();

				var myChartChina = echarts.init(myChartContainer);
				echarts.registerMap("china", chinaJson);
				var outname = [
					"北京",
					"南海诸岛",
					"天津",
					"上海",
					"重庆",
					"河北",
					"河南",
					"云南",
					"辽宁",
					"黑龙江",
					"湖南",
					"安徽",
					"山东",
					"新疆",
					"江苏",
					"浙江",
					"江西",
					"湖北",
					"广西",
					"甘肃",
					"山西",
					"内蒙古",
					"陕西",
					"吉林",
					"福建",
					"贵州",
					"广东",
					"青海",
					"西藏",
					"四川",
					"宁夏",
					"海南",
					"台湾",
					"香港",
					"澳门",
				];
				var outvalue = [
					null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null,
					null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null,
					null, null, null,					
				];
				//console.log(this.getArea(datas[0].name))
				datas.forEach(t => {
					t.area = this.getArea(t.name)
				})
				outname.forEach((t, i) => {
					datas.forEach((ts, is) => {
						//console.log(ts.area.Province,t)
						if (ts.area.Province.includes(t)) {
							outvalue[i] =
								`${ts.area.City}门店,开机时间${dayjs(ts.times*1000).format('YYYY-MM-DD HH:mm')}`
						}
					})
				})

				var outdata = [];


				for (var i = 0; i < outname.length; i++) {
					outdata.push({
						name: outname[i],
						value: outvalue[i],
					});
				}


				//console.log(outvalue)


				var geoCoordMap = {};
				/*获取地图数据*/
				var mapFeatures = echarts.getMap("china").geoJson.features;
				//  console.log(mapFeatures)
				mapFeatures.forEach(function(v) {
					//console.info(v);
					// 地区名称
					var name = v.properties.name;
					// 地区经纬度
					geoCoordMap[name] = v.properties.cp;
				});

				var convertData = function(data) {

					var res = [];
					for (var i = 0; i < data.length; i++) {
						var geoCoord = geoCoordMap[data[i].name];

						if (geoCoord) {
							res.push({
								name: data[i].name,
								value: geoCoord.concat([data[i].value]),
							});
						}
					}
					
					return res;
				};

				var optionMap = {
					backgroundColor: "#0F1C3C",
					tooltip: {
						trigger: 'item',
						show: true,
						formatter: function(params) {

							if (params.data.value) {
								return (
									"&nbsp;&nbsp;" +
									params.name +
									"&nbsp;&nbsp;&nbsp;" +
									params.data.value +
									"&nbsp;&nbsp;"
								);
							} else {
								return (
									"&nbsp;&nbsp;" +
									params.name +
									"&nbsp;&nbsp;&nbsp;" +
									"暂无时间" +
									"&nbsp;&nbsp;"
								);
							}
						},
					},

					geo: {
						map: "china",
						show: true,
						roam: false,
						label: {
							emphasis: {
								show: false,
							},
						},
						layoutSize: "100%",
						itemStyle: {
							normal: {
								borderColor: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
											offset: 0,
											color: "#00F6FF",
										},
										{
											offset: 1,
											color: "#53D9FF",
										},
									],
									false
								),
								borderWidth: 3,
								shadowColor: "rgba(10,76,139,1)",
								shadowOffsetY: 0,
								shadowBlur: 60,
							},
						},
					},
					series: [{
							symbolSize: 1,
							label: {
								normal: {
									formatter: function(para) {
										return "{name|" + para.data.name + "}"; //城市名字
									},
									rich: {
										cnNum: {
											fontSize: 14,
											color: "#D4EEFF",
											align: "center",
										},
										name: {
											fontSize: 12,
											color: "#D4EEFF",
											align: "center",
											lineHeight: 20,
										},
									},
									//formatter: '{b}',
									color: "#D4EEFF",
									show: true,
								},
								emphasis: {
									show: true,
								},
							},
							itemStyle: {
								normal: {
									color: "#D4EEFF",
								},
							},
							name: "light",
							type: "scatter",
							coordinateSystem: "geo",
							data: convertData(outdata),
						},
						{
							type: "map",
							map: "china",
							aspectScale: 0.75,
							//zoom:1.1,
							label: {
								normal: {
									show: false,
								},
								emphasis: {
									show: false,
								},
							},
							itemStyle: {
								normal: {
									areaColor: {
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
												offset: 0,
												color: "#073684", // 0% 处的颜色
											},
											{
												offset: 1,
												color: "#061E3D", // 100% 处的颜色
											},
										],
									},
									borderColor: "#215495",
									borderWidth: 1,
								},
								emphasis: {
									areaColor: {
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
												offset: 0,
												color: "#073684", // 0% 处的颜色
											},
											{
												offset: 1,
												color: "#061E3D", // 100% 处的颜色
											},
										],
									},
								},
							},
							data: outdata,
						},
						{
							type: "scatter",
							coordinateSystem: "geo",
							label: {
								normal: {
									show: false,
									color: "#fff",
									fontWeight: "bold",
									formatter: function(para) {
										return "{cnNum|" + para.data.value[2] + "}";
									},
									rich: {
										cnNum: {
											fontSize: 13,
											color: "#D4EEFF",
											left: "center",
										},
									},
								},
							},

						},
					],
				};

				myChartChina.setOption(optionMap);

				window.onresize = function() {
					resizeMyChartContainer();

					myChartChina.resize();
				};
			},
		},
	};
</script>

<style scoped>

</style>
